<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/photo.css}">
   
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  
   <link rel="stylesheet" href="../../static/css/me.css">
  
   <script src="/static/js/scriptindex.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
</head>
<body >

  
  <!--导航-->
  <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">管理后台</h2>
        <a href="/admin/blogs"class=" m-item item m-mobile-hide"><i class=" home icon"></i>博客</a>
        <a href="/admin/types" class=" m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
        <a href="/admin/tags" class="m-item item m-mobile-hide"><i class="tags icon" data-filtered="filtered"></i> &nbsp;标签</a>
        <a href="/admin/phototype" class="active m-item item m-mobile-hide"><i class="image icon" data-filtered="filtered"></i> &nbsp;相册</a>  
        <div class="right m-item m-mobile-hide menu">
          <div class="ui dropdown  item">
            <div class="text">
              <img class="ui avatar image" src="/static/img/bozhu.jpg">
              益达
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <a href="/admin/logout" class="item">注销</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>
  
  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
        <a href="#" th:href="@{/admin/phototypeinput}" class="  item">新增</a>
        <a href="#"  class="teal active item">列表</a>
      </div>
    </div>
  </div>

    
    <div class="container mt-4">
    
      <div class="row">
        <div class="col-12">
        
           <div class="card text-center"> 
               <div class="card-body ">
                 <div class=" card-title"><h3>Smile-相册</h3></div>
               </div>
           </div>
         
          </div>
      </div>
    
       <div class="row" style="margin-top: 20px">
       
        <div style="margin-top:10px" th:each="phototype:${phototypes}"  class=" col-6 col-sm-6 col-md-4">
       
          <div class="ui  zij">
              <div class="ui small images">
                <img id="typeimg"  class=" img-thumbnail" th:src="${phototype.imgurl}">
              </div>
              
	             <div class="ui top aligned dimmer">
                       <div class="content">
		                       <div class="ui inverted button" th:onclick="deleteupdate([[${phototype.id}]]);">
		                         <span style="color:#0072E3;font-size: 1.2rem">编辑</span>
		                       </div>
		                       <div  class="ui  inverted button">  <a style="text-decoration: none;color:green;font-size: 1.2rem" th:href="@{'/admin/photos?id='+${phototype.id}}" >进入</a></div>
		                       <div  class="ui inverted  button" th:onclick="deletetype([[${phototype.id}]]);">  <span style="color:red;font-size: 1.2rem">删除</span></div>
                        </div>
                </div>
  
  
             </div> 
             
             <p style="margin-top:3px;padding: 1px">     &nbsp;&nbsp; 
                <strong th:text="${phototype.name}"></strong> 
               
             </p>
             <p style="color:darkgray">&nbsp;&nbsp;&nbsp;<span th:text="${phototype.sum.size()}"> </span>张</p>
          
 
         
          
         </div>
         
       
	    
   
          
        
   
   
   <!-- 对应row -->      
   </div>
       
       
       
    </div>
    
    </body>
    
    
     <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
     
    <script type="text/javascript">
      $('.zij').dimmer({
             on: 'hover'
                      });
     // $('.segment').dimmer('hide');
    //收起导航栏
       $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
       });

       $('.ui.dropdown').dropdown({
          on : 'hover'
            });
            
    
    //删除相册
      function deletetype(id){
         
         if(confirm("确认删除吗？")){
         
              $.ajax({
               url: '/admin/phototypedelete',
               data:{'id':id},
               type:"post",
               dataType:"json",
               success:function(data){
                 if(data["result"]){
                    alert("删除成功！");
                    window.location.reload();
                 }else{
                     alert("删除失败！");
                 }
               }
         
         }); 
         
         
         };
         
      
        
      }
      
      function deleteupdate(id){
      
        
         window.location.href="/admin/phototypeinput?id="+id;
         
        // $.post("/admin/phototypeinput", {'id':id}, function(data, textStatus, req) {
         	
        // });
      }
    
    </script>
    </html>
    